<template>
  <!-- 地球表面的线和直线 -->
  <div class="page-container">
    <SelectTrigger label="折线的类型" :options="options" width="400px" />
    <div id="cesiumContainer"></div>
  </div>
</template>
<script setup>
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";
const options = ref([]); // 选项

onMounted(async () => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer", {
    imageryProvider: Cesium.createWorldImageryAsync({
      style: Cesium.IonWorldImageryStyle.AERIAL_WITH_LABELS,
    }),
    // baseLayerPicker:false,
  });

  options.value = [
    {
      text: "方式一： addImageryProvider 方式添加图层",
      onselect: async () => {
        const provider = await Cesium.IonImageryProvider.fromAssetId(4);
        const layer01 = viewer.imageryLayers.addImageryProvider(provider);
      },
    },
    {
      text: "方式二：add 方式添加图层",
      onselect: async () => {
        // 资源提供者    当前资源id Bing Maps Aerial with Labels
        const provider = await Cesium.IonImageryProvider.fromAssetId(3);
        // 当前图层
        const layer02 = new Cesium.ImageryLayer(provider);
        // 向当前集合新增图层
        viewer.imageryLayers.add(layer02);
      },
    },
  ];
});
</script>

<style scoped>
.page-container {
  width: 100%;
  height: 100%;
  position: relative;
}
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
